<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100%;
            height: 10cm;
            background-color: greenyellow;
        }
        a{
            font-size: 50px;
            margin-right: 80px;
            text-decoration: none;/*去下划线*/
        }
    </style>
</head>
<body>
    <a href="#/wx">微信</a><a href="#/txl">通讯</a><a href="#/fx">发现</a><a href="#/wo">我</a>
    <hr/>
    <div id="box">
        
    </div>
</body>
<script>
    let wx='<h1>微信内容</h1>';
    let txl='<h1>通讯录内容</h1>';
    let fx='<h1>发现内容</h1>';
    let wo='<h1>我的内容</h1>';
    // onhashchange()   new事件
    window.onhashchange=function(){
        console.log(location.hash);
    //  let path=location.hash.slice(1);    //删除#
        let path=location.hash.slice(2);    //删除#/
        let box=document.querySelector("#box");
        box.innerHTML=eval(path);   //eval()这里用于将string转为变量名
        /*
        switch(path){
            case '/wx':
            box.innerHTML=wx;
            break;
            case '/txl':
            box.innerHTML=txl;
            break;
            case '/fx':
            box.innerHTML=fx;
            break;
            case '/wo':
            box.innerHTML=wo;
            break;
        }*/
        /*
        if(path=='/wx'){
            box.innerHTML=wx;
        }else if(path=='/txl'){
            box.innerHTML=txl;
        }else if(path=='/fx'){
            box.innerHTML=fx;
        }else if(path=='/wo'){
            box.innerHTML=wo;
        }*/
    }
</script>
</html>